<template>
<div class="bg-white" style="background-color: white;">
	<top-nav bgColor="white" title="签到" returnPath="上一级"></top-nav>
  	<ClassInfo  @hasClass="hasClass" @passInfo="passInfo"   barButton="!disable" :isView="isView" ></ClassInfo>
 	 	<section style="height: 1px;background-color:#dfdfdf;"></section>
 	<section style="font-size: 1.1rem;text-indent: 2rem;margin-top: 2rem;">  上课时间：{{DDSJ}}</section>
 	<section v-show="isSgin">
 		打卡时间：{{studentSginInData.updateTime}} 
 			<span>{{studentSginInData.sginInState}}</span>
 	</section>
 	<section class="circle" v-show="!isSgin" @click="sginIn">
 		<section>签到</section>
 		<section style="font-size: 0.9rem;">{{time}}</section>
 	</section>
 	<section>
 		
 	</section>
 	
 	 	<section style="font-size: 1.1rem;text-indent: 2rem;">  下课时间：{{LKSJ}}</section>
  </div>
</template>
<script>
	
	
import ClassInfo from '@/components/class_info'
import topNav from '@/components/assembly/topNav/topNav'
import axios from 'axios'
//import store from '../store/store'

export default {
  data () {
    return {
    	isView:{
    		teaContent:false,
    		didian:false
    	},
      disable:true,
      courseData:{},
      DDSJ:'111',//上课时间
      LKSJ:'111',//下课时间
      timeOption:{},
      time:null,//当前时间
      studentSginInData:{
      },
      isSgin:false //是否签到
     
    }
  },
  computed:{
  
   
  },
  components:{
    ClassInfo,
    topNav
  },
  watch:{
  	
  },
  mounted(){
  		this.setTime()
  },
  methods: {
  	passInfo(val){
  		let that=this
  		this.courseData=val
  		this.diaryState=val.courseDiaryState
  		
  		that.axios.get('/iyx/studentsSignIn/'+val.classCourseId+'/getMySignIn', {
          }).then(function (response) {
           		that.studentSginInData=response.data.data
           		if(that.studentSginInData==null){
           			that.studentSginInData={updateTime:'',sginInState:''}
           			that.isSgin=true
           		}else{
           			
//         			if(that.studentSginInData.sginInState=='迟到')
           		}
//         		
            });
  		
  		
  		console.info(this.courseData)
  		if(val.courseDiaryState==0){
  			  this.diaryState=0
  		}
  		this.isEditSec=true
  		that.courseId=val.class_course_id
  		that.courIndex=val.courseWhichIndex+'-'+(parseInt(val.courseWhichIndex)+1)
  		this.getCourTimeInfo(that.courIndex)
  		this.disable=false
  		this.enable=true
  	},
 	//获取每节课的配置参数
    getCourTimeInfo(val){
			let that=this
			that.axios.get('/iyx/schedule/SelectAll').then(function(response){
				for(var i in response.data){
					that.timeOption[(parseInt(i)+1)+'']=response.data[i]
				}
//				console.info(that.timeOption)
				if(val.length==3){
						that.DDSJ=that.timeOption[val.slice(0,1)].start
						that.LKSJ=that.timeOption[val.slice(2)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,1)].length)+parseInt(that.timeOption[val.slice(2)].length)
				}else if(val.length==4){
						that.DDSJ=that.timeOption[val.slice(0,1)].start
						that.LKSJ=that.timeOption[val.slice(2)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,1)].length)+parseInt(that.timeOption[val.slice(2)].length)
				}else if(val.length==5){
						that.DDSJ=that.timeOption[val.slice(0,2)].start
						that.LKSJ=that.timeOption[val.slice(3)].end
						that.JSSJ=parseInt(that.timeOption[val.slice(0,2)].length)+parseInt(that.timeOption[val.slice(3)].length)
				}
				for(var i=0;i<that.JSSJ+20+1;i++){
						that.addressSlots[0].values.push((i)+'分钟')
						that.slots[0].values.push((i)+'分钟')
				}
				that.slots[0].defaultIndex=that.JSSJ
				that.timeLength=[that.JSSJ+'分钟']
//				that.address = [that.JSSJ+'分钟']
				that.beforeVal=[that.JSSJ+'分钟']
				that.SKSC=that.JSSJ
				if(that.DDSJ.length==4){
						that.DDSJ=0+that.DDSJ
				}
				if(that.LKSJ.length==4){
						that.LKSJ=0+that.LKSJ
				}
			}).catch(function(error){
				
			})
		},
    hasClass(val){
      this.noClass = !val
      this.isbotBtn = val
    },
    setTime(){
    	let that=this
    	setInterval(()=>{
    		that.time=new Date().toLocaleTimeString()
		},1000)
	},
	sginIn(){
		let that=this
		let sginInState="正常"
//		if(that.DDSJ<new Date().toLocaleTimeString())
		let DDsjtime=new Date().toLocaleDateString()+" "+that.DDSJ

		if(Date.parse(DDsjtime)<Date.parse(new Date())){
			sginInState="迟到"
			console.info(new Date())
		}
			
		that.axios.post('/iyx/studentsSignIn/sginIn',{
		  	'classCourseId':that.courseData.classCourseId,
		  	'teacherId':that.courseData.courseTeacherId,
		  	'teacherName':that.courseData.courseTeacherName,
		  	'sginInState':sginInState
          }).then(function (response) {
           		that.studentSginInData=response.data.data
           		if(that.studentSginInData!=null)
           		{
           			that.isSgin=true
           		}
            });
		}
  
  }
 
}
</script>
<style>
.circle {
border-radius: 50%;
width: 150px;
height: 150px; 
background-color:#ADFF2F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.1rem;
margin:0 auto;
/* 宽度和高度需要相等 */
}
.diary-title{
 	height: 3rem;
 	display: flex;
 	align-items: center; 
 	background-color: #f5f5f5;
 	justify-content: space-between;
}
.diary-title-left{
	margin-left: 5%;
	color: #8a8a8a;
	font-size: 0.9rem;
}
.diary_state{
	padding: 2px 4px;
	float: right;
	margin-right: 8%;
	border-radius: 3px;
	color: #fff;
	display: block;
	font-size: 12px;
}
.diary_unsubmit{
	background-color: #f83535;
}
.diary_submit{
	background-color: rgb(60, 159, 236);
}
.diary_edit{
	background-color: rgb(76, 231, 98);
}
.Edit-count{
	position: absolute;
	right: 1rem; 
	bottom: 0.2rem;
	font-size: 0.8rem;
}
.defaultLine{
		border-bottom: 1px solid rgba(0,0,0,.12)!important;	
}
.temp-mask{
	 z-index: 1501;
	 background-color:rgba(0,0,0,0);
	 position: fixed;
	 width: 100%;
	 height: 100%;
	 left: 0;
	 top: 0;
}
.picker-slot-wrapper{
	transition-duration:1s!important;
	transition-timing-function:cubic-bezier(0.2,0.1,0.35,1)!important!important
}
.yd-popup-show{
		height: auto!important;
}
.slot1{
	font-size: 1rem;
}
.mu-picker-item{
	font-size: 1rem!important;
}
.slider-time{
		display: flex; 
		height: 2.6rem; 
		border-bottom: 1px solid #f2f2f2;
		-webkit-box-pack: justify;
		justify-content: space-between;
		position: relative;
}
.slider-time a{
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	padding: 0 30px;
}
.demo-popup-bottom{
	width: 100%;
}
 .mu-content-block{
 		padding: 0!important;
 }
	.demo-picker-container{
		width: 100%;
		/*position: absolute;*/
		z-index: 320;
		/*left: 0;*/
		/*bottom: 0;*/
		background-color: white;
	}
  .mu-sub-header{
    font-size:20px;
    background-color:whitesmoke;
  }
  .topSelectBtn{
    background-color: blue;
    color:white;
  }
  .mu-list-item-zzg{
    padding:20px;
  }
  .yd-datetime-input{
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 250;
  	color:rgba(0,0,0,0);
  }
  .yd-datetime-head{
  	background-color: #fff;
  }
  .yd-datetime-head>a:last-child{
		color: #2397f2!important;
	}
.mt8 {
  margin-top: 8px;
  margin-bottom: 1.5rem;
}
.flex-demo {
  text-align: center;
}
.flex-title{
  text-size:18px;
  background-color: #eee;
  padding:10px;
}
.flex-body{
  padding: 10px;
  background-color: #fff;
}
.bottom-btnbar{
    position: fixed !important;
    right: 0;
    bottom: 0;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    background-color: white;
    border-top:1px solid #eee;
    z-index: 280;
  }
  .active{
  	background-color:rgba(255,255,255,0)!important;
  	color:#ff4081!important;
  }
</style>